<template>
    <div class="base">
      <!-- 注册登录界面 -->
     <div  class="loginAndRegist">
          <!--登录表单-->
          <div  class="loginArea">
              <transition
                      name="animate__animated animate__bounce"
                      enter-active-class="animate__fadeInUp"
                      leave-active-class="animate__zoomOut"
                      appear
              >
              <!-- 标语 -->
              <div v-show="isShow" class="title">
                  登录
              </div>
              </transition>
              <transition
                      name="animate__animated animate__bounce"
                      enter-active-class="animate__fadeInUp"
                      leave-active-class="animate__zoomOut"
                      appear
              >
              <!-- 密码框和用户名框 -->
              

              <div v-show="isShow" class="pwdArea" >
                <el-form ref="loginref" :model="loginUser" class="login-form" :rules="loginRules" style="align-items: center;justify-content: center">
                  
                  <el-form-item prop="userId" style="margin-left:40px;margin-top:-80px">
                    <div style="flex: 1;justify-content: center;display: flex;align-items: center;margin-left:-120px;margin-top:0px">
                     <el-input class="username" v-model="loginUser.userId" style="width: 200px;height: 40px;"  placeholder="用户ID"></el-input>   
                    </div>
                  </el-form-item>
                  <el-form-item prop="userPassword" style="margin-left:40px;margin-top:40px">
                    <div style="flex: 1;justify-content: center;display: flex;align-items: center;margin-left:-120px;margin-top:-20px">
                      <el-input placeholder="密码"  v-model="loginUser.userPassword" style="width: 200px;height: 40px;" show-password></el-input>
                    </div>
                  </el-form-item>            
                </el-form>
       
              </div>
              </transition>
              <transition
                      name="animate__animated animate__bounce"
                      enter-active-class="animate__fadeInUp"
                      leave-active-class="animate__zoomOut"
                      appear
              >
              <!-- 登录注册按钮 -->
              <div v-show="isShow" class="btnArea" >
                  <el-button type="success" round style="background-color: #2951b7;letter-spacing: 5px ;height: 40px;width:200px;font-size: 16px;" @click="UserLogin"  >登录</el-button>
              </div>
              </transition>
          </div>
          <!-- 注册表单 -->
          <div class="registArea">
              <transition
                      name="animate__animated animate__bounce"
                      enter-active-class="animate__fadeInUp"
                      leave-active-class="animate__zoomOut"
                      appear
              >
              <!--  注册表头-->
              <div v-show="!isShow" class="rigestTitle" >
                  <span style="align-items:center;justify-content:center;margin-left:0px;margin-top:40px">
                    用户注册
                  </span>
              </div>
              </transition>
              <transition
                      name="animate__animated animate__bounce"
                      enter-active-class="animate__fadeInUp"
                      leave-active-class="animate__zoomOut"
                      appear
              >
  <!--            注册表单-->
              <div  v-show="!isShow" class="registForm" style="margin-left:220px;margin-top:-140px">
                <el-form ref="regref" :model="regUser" class="login-form" :rules="regRules" style="align-items: center;justify-content: center">
                    <el-form-item prop="userId" style=" " label="用户ID： &nbsp;&nbsp;">          
                     <el-input class="username" v-model="regUser.userId" style="width: 200px ;height: 30px;"  placeholder="用户ID"></el-input>                        
                  </el-form-item>
                  <el-form-item prop="userName" style="" label="用户名：&nbsp;&nbsp;&nbsp;">          
                     <el-input class="username" v-model="regUser.userName" style="width: 200px;height: 30px;"  placeholder="用户名"></el-input>                        
                  </el-form-item>
                  <el-form-item prop="userPwd" style="" label="密码：&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;">               
                      <el-input placeholder="密码"  v-model="regUser.userPwd" style="width: 200px;height: 30px;" show-password></el-input>              
                  </el-form-item>
                  <el-form-item prop="userRePwd" style="" label="确认密码：">
                      <el-input placeholder="确认密码"  v-model="regUser.userRePwd" style="width: 200px;height: 30px;" show-password></el-input>
                  </el-form-item>
                  <el-form-item prop="userPhone" style="" label="电话：&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;">
                      <el-input placeholder="电话"  v-model="regUser.userPhone" style="width: 200px;height: 30px;" ></el-input>
                  </el-form-item>
                  <el-form-item prop="userEmail" style="" label="邮箱：&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;">
                      <el-input placeholder="邮箱"  v-model="regUser.userEmail" style="width: 200px;height: 30px;" ></el-input>
                  </el-form-item>
                  <el-form-item prop="userSex" style="" label="性别：&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;">
                  <el-radio-group v-model="regUser.userSex" class="ml-4">
                        <el-radio label="男" size="large">男</el-radio>
                        <el-radio label="女" size="large">女</el-radio>
                      </el-radio-group>
                  </el-form-item>
                </el-form>

                  
              </div>
              </transition>
              <transition
                      name="animate__animated animate__bounce"
                      enter-active-class="animate__fadeInUp"
                      leave-active-class="animate__zoomOut"
                      appear
              >
  <!--            注册按钮-->
              <div  v-show="!isShow" class="registBtn">
                  <el-button type="success" round style="background-color: #2951b7;letter-spacing: 5px" @click="userRegister">注     册</el-button>
              </div>
              </transition>
          </div>
          <!-- 信息展示界面 -->
           <div id="aaa" class="showInfo"
                :style="{
               borderTopRightRadius:styleObj.bordertoprightradius,
               borderBottomRightRadius:styleObj.borderbottomrightradius,
               borderTopLeftRadius:styleObj.bordertopleftradius,
               borderBottomLeftRadius:styleObj.borderbottomleftradius,
               right:styleObj.rightDis
              }"
                ref="showInfoView">
  
               <transition
                       name="animate__animated animate__bounce"
                       enter-active-class="animate__fadeInUp"
                       leave-active-class="animate__zoomOut"
                       appear
               >
              <!-- 没有用户输入用户名或者找不到用户名的时候 -->
              <div v-show="isShow" style="display: flex;flex-direction: column;align-items: center;justify-content: center;width: 100%;height: 100%">
               <!-- 欢迎语 -->
                   <div style="flex: 2;display: flex;align-items: center;font-size: 22px;color: #FFFFFF;font-weight: bold">
                   欢迎登入会议室管理系统
                   </div>
              <!-- 欢迎图片 -->
                   <div style="flex: 2">
                       <el-button type="success"  style="background-color:#2951b7;border: 1px solid #ffffff;" round @click="changeToRegiest">还没有账户？点击注册</el-button>
                   </div>
             </div>
               </transition>
             <!-- 用户输入用户名时展示头像以及姓名 -->
  <!--           <div>-->
  
  <!--           </div>-->
               <transition
                       name="animate__animated animate__bounce"
                       enter-active-class="animate__fadeInUp"
                       leave-active-class="animate__zoomOut"
                       appear
               >
             <!-- 用户注册的时候展示信息 -->
             <div v-show="!isShow" style="display: flex;flex-direction: column;align-items: center;justify-content: center;width: 100%;height: 100%">
                 <!-- 欢迎语 -->
                 <div style="flex: 2;display: flex;align-items: center;font-size: 22px;color: #FFFFFF;font-weight: bold">
                     欢迎注册
                 </div>
                 <!-- 欢迎图片 -->
                 <div style="flex: 2">
                     <el-button type="success"  style="background-color:#2951b7;border: 1px solid #ffffff;" round @click="changeToLogin">已有账户？点击登录</el-button>
                 </div>
             </div>
               </transition>
          </div>
     </div>
     
    </div>
  </template>
  
  <script>
      //import 'animate.css';
      // eslint-disable-next-line no-unused-vars
      import { ref } from 'vue'
      import {Axios as request} from "axios";
      import { $login ,$register} from "../../api/loginapi.js";
      //const loginref=ref(null)
    export default {
  
      name:'Login',
      data(){
     

      

          return{
              //看看用不用转成用户对象
              loginref:(null),
              regref:(null),
              loginUser:{
                  userId:"",
                  userPassword:""
              },
            loginPwdRules: {
                password: [{ required: true, message: '请输入密码', trigger: 'blur' }],             
            },
            loginRules: {
                userId: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
                userPassword: [{ required: true, message: '请输入密码', trigger: 'blur' }],
                
            },
            regRules: {
                userId: [{ required: true, message: '请输入ID', trigger: 'blur' },
                { type : "string" , required: true , pattern : /^[0-9]+$/ ,message:'ID只能为数字'}],   
                userName: [{ required: true, message: '请输入名称', trigger: 'blur' }],    
                userPwd: [{ required: true, message: '请输入密码', trigger: 'blur' }],    
                userRePwd: [{ required: true, message: '请确认密码', trigger: 'blur' },
                //{ required: true, validator: equalToPassword, trigger: "blur" }
                ], 
                userEmail: [{ required: true, message: '请输入邮箱', trigger: 'blur' },
                { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change']} ],     
                userPhone: [{ required: true, message: '请输入电话', trigger: 'blur' },
                { type : "string" , required: true , pattern : /^[0-9]+$/ ,len: 11,message:'请输入正确的电话'}],   
                userSex: [{ required: true, message: '请选择性别', trigger: 'blur' }],       

            },
  
              admins:{},
              ////看看用不用转成用户对象
              regUser:{
                  userName:'',
                  userRePwd:'',
                  userPwd:'',
                  userPhone:'',
                  userEmail:'',
                  userId:"",
                  userSex:''
              },
              regDate:{
                  userId:'',
                  userName:'',
                  userPassword:'',
                  userPhone:'',
                  userEmail:'',
                  userSex:'',
                  userAdmin:'不是'
              },
              styleObj:{
                  bordertoprightradius:'15px',
                  borderbottomrightradius: '15px',
                  bordertopleftradius:'0px',
                  borderbottomleftradius:'0px',
                  rightDis:'0px'
              },
              isShow:true
          }
      },
      created() {
          //this.loadInfoOfAdmin();
      },
      methods:{
          changeToRegiest(){
              this.styleObj.bordertoprightradius= '0px'
              this.styleObj.borderbottomrightradius='0px'
              this.styleObj.bordertopleftradius='15px'
              this.styleObj.borderbottomleftradius='15px'
              this.styleObj.rightDis='50%'
              this.isShow = !this.isShow
          },
          changeToLogin(){
              this.styleObj.bordertoprightradius= '15px'
              this.styleObj.borderbottomrightradius='15px'
              this.styleObj.bordertopleftradius='0px'
              this.styleObj.borderbottomleftradius='0px'
              this.styleObj.rightDis='0px'
              this.isShow = !this.isShow
          },
          //用户登录
      

        
          UserLogin(){
          
            this.$refs.loginref.validate(async(valid)=>{
              if(valid){   
                console.log(this.loginUser)
                let data = await $login(this.loginUser);
                console.log(data.code,"loginindex")
                if(data.code==0){
                    alert("密码错误或用户不存在")
                }else if(data.code==1){
                    console.log(data.data,"loginindex")
                    if(data.data.userAdmin=="是"){   
      
                        this.$router.push("/manageLayout");
                    }else if(data.data.userAdmin=="不是"){
                       
                        this.$router.push("/commonLayout");
                    }
                }
                
                
              }else{
                alert('错误')
                return false
              }
            })
             
        
          },
          //加载管理员信息
          loadInfoOfAdmin(){
        
          },
           //用户注册
           async userRegister(){
                if(this.regUser.userPwd!==this.regUser.userRePwd){
                    alert("您的两次密码不一样")
                }else{
                    this.$refs.regref.validate(async(valid)=>{
                        if(valid){
                            console.log(this.regUser)
                            this.regDate.userId=this.regUser.userId
                            this.regDate.userPassword=this.regUser.userPwd
                            this.regDate.userPhone=this.regUser.userPhone
                            this.regDate.userEmail=this.regUser.userEmail
                            this.regDate.userSex=this.regUser.userSex
                            this.regDate.userName=this.regUser.userName
                            console.log(this.regDate)

                            let data = await $register(this.regDate);
                            console.log(data.code,"regindex")
                            if(data.code==1){
                                alert("注册成功")
                            }else{
                                alert(data.msg)
                                
                            }
                        }else{
                            alert('注册格式错误')
                            return false
                        }
                    })
                    
                }
                

        
              

            }
      }
    }
  </script>
  
  <style>
  /* @import '../assets/css/Login.css' */
  .base{
      height: 100vh;
      display: flex;
      justify-content: center;
      align-items: center;
      background-image: url("../../assets/images/bkgWeather.png");
      background-size: 100%;
  }
  .loginAndRegist{
      position: relative;
      display: flex;
      justify-content: center;
      align-items: center;
      overflow: hidden;
  }
  .loginArea{
      background-color: rgba(255,255,255,0.8);
      border-top-left-radius: 15px;
      border-bottom-left-radius: 15px;
      height: 500px;
      width: 350px;
      z-index: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      overflow: hidden;
  }
  
  .registArea{
      border-top-right-radius: 15px;
      border-bottom-right-radius: 15px;
      height: 500px;
      width: 350px;
      background-color: rgba(255,255,255,0.8);
      z-index: 1;
      display: flex;
      flex-direction: column;
      justify-content:center ;
      align-items: center;
  }
  .showInfo{
      border-top-right-radius: 15px;
      border-bottom-right-radius: 15px;
      position: absolute;
      height: 500px;
      width: 350px;
      z-index:2;
      top: 0;
      right: 0;
      background-image: url("../../assets/images/bkgWeather.png");
      background-size: 200% 120%;
      background-position: -150px -50px;
  }
  .showInfo:hover{
      background-size: 180% 110%;
      background-position: -120px -40px;
  }
  .title{
      width: 70%;
      flex:1;
      border-bottom: 1px solid #2951b7;
      display: flex;
      align-items: center;
      color: #2951b7;
      font-weight: bold;
      font-size: 24px;
      display: flex;
      justify-content: center;
  }
  #aaa{
      transition: 0.3s linear;
  }
  .login-form {
    position: relative;
    width: 520px;
    max-width: 100%;
    padding: 160px 35px 0;
    margin: 0 auto;
    overflow: hidden;
  }
  .pwdArea{
      width: 100%;
      flex:2;
      display: flex;
      flex-direction: column;
      display: flex;
      flex-direction: column;
  
  
  }
  .pwdArea input{
      height: 40px;
      outline: none;
      height: 90%;
      border-radius:13px ;
      padding-left: 10px;/*输入框内已有字体距离左边距离 */
      font-size: 15px;/*字体大小，似乎还连带着框的大小  border: 1px solid gray;椭圆框 */
      
  }/*修改所有pwdArea 中的 input*/
  .pwdArea input:focus{
      
  }
      .btnArea{
          flex:1;
          width: 100%;
          display: flex;
          justify-content: space-around;
          align-items: center;
      }
      .rigestTitle{
          width: 70%;
          flex: 1;
          color: #2951b7;
          font-weight: bold;
          font-size: 24px;
          display: flex;
          justify-content: center;
          align-items: center;
          border-bottom: 1px solid #2951b7;
      }
      .registForm{
          flex: 2;
          display: flex;
          flex-direction: column;
          color: #2951b7;
          font-size: 16px;
      }
  
      .registForm input{
      outline: none;
      height: 80%;
      border-radius:13px ;
      padding-left: 10px;
      font-size: 16px;
      
      }
  .registForm input:focus{
      
  }
  #elselect:focus{
      border: 2px solid #2951b7;
  }
      .registBtn{
          flex: 1;
          display: flex;
          justify-content: center;
          align-items: center;
      }
  
  
  </style>